<template>
  <Form ref="formRef" :model="formState" layout="inline" class="form-wrapper" v-bind="formItemLayout">
    <FormItem v-if="props.type === '2'" label="租户" name="tenantList">
      <Select
        v-model:value="formState.tenantList"
        :field-names="{ label: 'tenantName', value: 'tenantCode' }"
        :options="tenantOptionList"
        mode="multiple"
        :style="{ width: '270px' }"
      >
      </Select>
    </FormItem>

    <FormItem v-if="props.type === '1'" label="应用" name="appList">
      <Select
        class="w-270px"
        v-model:value="formState.appList"
        :field-names="{ label: 'appName', value: 'appId' }"
        :options="appOptionList"
        mode="multiple"
      >
      </Select>
    </FormItem>

    <FormItem
      v-if="props.type === '1'"
      key="componentKey"
      :rules="[{ required: apiBoolean, message: '接口必填' }]"
      label="接口"
      name="apiList"
    >
      <Select
        v-model:value="formState.apiList"
        :field-names="{ label: 'description', value: 'id' }"
        :options="apiOptionList"
        mode="multiple"
      >
      </Select>
    </FormItem>

    <FormItem label="日期" name="date">
      <RangePicker class="w-300px" v-model:value="formState.date" :allowClear="true"></RangePicker>
    </FormItem>

    <div class="btn-wrapper">
      <Button type="primary" @click="onSubmit">查询</Button>
      <Button style="margin-left: 10px" @click="resetForm">重置</Button>
    </div>
  </Form>
  <div class="absolute top-20 right-15"></div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRaw, watch } from 'vue';
import { Button, Form, FormItem, RangePicker, Select, SelectProps } from 'ant-design-vue';
import {
  getRecordApiList,
  getRecordAppList,
  getRecordTenantList,
} from '/@/api/measurement-center/function-statistic/functionStatistic';

const props = defineProps({
  type: String,
});
const emits = defineEmits(['form']);
const appOptionList = ref<SelectProps['options']>([]);
const apiOptionList = ref<SelectProps['options']>([]);
const tenantOptionList = ref<SelectProps['options']>([]);
const componentKey = ref(0);
const apiBoolean = ref(false);
const formRef = ref();
const formItemLayout = {
  labelCol: { span: 16 },
  wrapperCol: { span: 24 },
};
const formState = reactive<Record<string, any>>({});
onMounted(async () => {
  appOptionList.value = await getRecordAppList();
  tenantOptionList.value = await getRecordTenantList();
  // apiOptionList.value = await getRecordApiList("1583407923101433856");
});

watch(
  () => formState.appList,
  async () => {
    if (toRaw(formState.appList).length !== 0) {
      apiOptionList.value = await getRecordApiList(formState.appList);
      apiBoolean.value = true;
      formState.apiList = undefined;
    } else {
      apiBoolean.value = false;
      formState.apiList = undefined;
    }
  },
  { deep: true }
);

watch(
  apiOptionList,
  () => {
    componentKey.value += 1;
    formState.apiList = undefined;
  },
  { deep: true }
);

const onSubmit = async () => {
  let params;
  formRef.value.validate().then(() => {
    params = toRaw(formState);
    emits('form', params);
  });
};
const resetForm = () => {
  formRef.value.resetFields();

  if (formState.appList) {
    formState.appList = [];
  } else {
    formState.tenantList = [];
  }
  formState.date = [];
};
</script>
<style lang="less">
.form-wrapper {
  padding: 20px 0;

  .ant-form-item {
    .ant-form-item-control-input {
      width: 270px;
    }

    .ant-calendar-picker-input {
      width: 250px;
    }
  }
}

.btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  padding: 0px 20px;
}
</style>
